<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-select placeholder="选择品牌" v-model="formInline.brand_id" filterable @change="brandChange">
                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="fetchData">搜索</el-button>
                </el-form-item>
                <el-button class="pull-right" type="primary" size="small" @click="addEditClick()">新增杂项入账类型</el-button>
            </el-form>
            <!-- 列表 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" label="杂项类型" prop="name"></el-table-column>
                <el-table-column align="center" label='备注' prop="remark"></el-table-column>
                <el-table-column align="center" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="delClick(scope.row.id,scope.$index)" type="danger" icon="el-icon-delete"
                            size="mini"></el-button>
                        <el-button type="primary" plain size="mini" @click="deployStoreClick(scope.row)">配置门店</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新增弹框 -->
            <el-dialog :close-on-click-modal="false"  width="360px" title="新增杂项入账类型" :visible.sync="addEditDialog" @close="callOf('saveForm')">
                <el-form :model="saveForm" :rules="rules" ref="saveForm" class="demo-form-inline">
                    <el-form-item label="杂项类型" prop="name">
                        <el-input :maxlength="20" placeholder="20字内" v-model="saveForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input :maxlength="50" type="textarea" placeholder="选填备注50字内" v-model="saveForm.remark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" type="primary" @click="saveClick('saveForm')">确认添加</el-button>
                </span>
            </el-dialog>
            <!-- 配置门店弹框 -->
            <el-dialog :close-on-click-modal="false"  width="650px" title="选择门店" :visible.sync="storeDialog">
                <div>
                    <div class="el-transfer-panel pull-left transferHeader">选择门店</div>
                    <div class="el-transfer-panel pull-right transferHeader">已选门店</div>
                </div>
                <el-transfer :props="{key: 'id', label: 'name'}" :titles="['全选', '全选']" :button-texts="['删除', '添加']"
                    filterable v-model="saveStore.store_list" :data="storeList">
                </el-transfer>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" type="primary" @click="saveStoreClick">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getBrandList,
        getStoreList,
        saveStore,
        del,
        save
    } from "@/api/information/sundry_info";
    export default {
        data() {
            return {
                storeDialog: false,
                list: null,
                listLoading: false,
                storeList: [],
                brandList: [],
                formInline: {
                    brand_id: '',
                },
                saveForm: {
                    name: '',
                    remark: '',
                    brand_id: '',
                },
                saveStore: {
                    id: '',
                    store_list: [],
                },
                rules: {
                    name: [
                        { required: true, message: '请输入杂项类型', trigger: 'blur' }
                    ],
                },
                addEditDialog: false,
            };
        },
        created() {
            this.getBrand();
        },
        methods: {
            deployStoreClick(row) {
                // 旧的门店做对比
                this.old_store_list = row.store_list;
                this.saveStore.store_list = row.store_list;
                this.saveStore.id = row.id;
                this.storeDialog = true;
            },
            // 提交
            saveClick(formName) {
                this.saveForm.brand_id = this.formInline.brand_id;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        save(this.saveForm).then(response => {
                            this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                            if (response.code == 1) {
                                this.fetchData();
                                this.addEditDialog = false;
                            }
                        });
                    }
                });
            },
            // 配置门店提交
            saveStoreClick() {
                if (JSON.stringify(this.old_store_list) == JSON.stringify(this.saveStore.store_list)) {
                    this.$message({ type: 'error', message: '配置门店未修改' });
                    return;
                }
                let data = JSON.parse(JSON.stringify(this.saveStore))
                saveStore(data).then(response => {
                    this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                    this.fetchData();
                    this.storeDialog = false;
                });
            },
            // 编辑和新增方法
            addEditClick() {
                this.addEditDialog = true;
            },

            delClick(id, index) {
                this.$confirm('移除后已配置门店将无法为该杂项类型做日报', '提示', { type: 'warning' }).then(() => {
                    del({ id: id }).then(response => {
                        if (response.code == 1) {
                            this.list.splice(index, 1);
                            this.$message({ type: 'success', message: response.message });
                        }
                    });
                })
            },
            getBrand() {
                getBrandList({ org: 1, category_id: 325 }).then(response => {
                    this.brandList = response;
                    this.formInline.brand_id = response[0].id;
                    this.getStore();
                    if (this.list == null) {
                        this.fetchData()
                    }
                });
            },
            brandChange(){
                this.fetchData();
                this.getStore();
            },
            getStore() {
                getStoreList({ brand: this.formInline.brand_id, category_id: 325 }).then(response => {
                    this.storeList = response;
                });
            },
            searchClick() {
                this.fetchData();
            },
            // 列表获取
            fetchData(data) {
                getList(this.formInline).then(response => {
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            //关闭弹框重置
            callOf(formName) {
                this.addEditDialog = false;
                this.$refs[formName].resetFields();
            },
        }
    };
</script>
